<df-oemdrawer  style="margin-top: 25px;">
  
  <df-oemdrawer-popup>
    <df-oemdrawer-close class="drawer-cover drawer-close"></df-oemdrawer-close>
    <df-oemdrawer-popup-warp position="bottom">
      <div class="df-w-screen">
        <div class="drawer-header">
          <span class="df-font-bold" >{{lang.collections.detail.filter}}</span>
          <df-oemdrawer-close class="df-flex df-items-center drawer-close">
            <svg t="1676972642582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8275" width="20" height="20"><path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="8276"></path></svg>
          </df-oemdrawer-close>
        </div>
        <div class="drawer-body collection-mobile-filter">
          <df-oemmenu class='df-block md:df-visible'>
            <df-oemmenu-label>
              <div >{{lang.general.sort_by}}</div>
            </df-oemmenu-label>
            <df-oemmenu-warp>
              <div class="filter-box">
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox" type="radio" style=" flex-shrink: 0;"  name="sort_by" value="created-descending"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>Date, new to old
                    </label>
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox" type="radio" style=" flex-shrink: 0;"  name="sort_by" value="star-descending"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>Good reviews first
                    </label>
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox" type="radio" style=" flex-shrink: 0;"  name="sort_by" value="star-ascending"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>Bad rating priority
                    </label>
              </div>
            </df-oemmenu-warp>
          </df-oemmenu>
            <df-oemmenu >
              <df-oemmenu-label>
                <div >{{lang.general.images}}</div>
              </df-oemmenu-label>
              <df-oemmenu-warp>
                  <div class="filter-box">
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox "   style=" flex-shrink: 0;" type="radio" name="is_image" value="0"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.all}}
                    </label>
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox "   style=" flex-shrink: 0;" type="radio" name="is_image" value="1"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.with_images}}
                    </label>
                  </div>
              </df-oemmenu-warp>
            </df-oemmenu>
            <df-oemmenu style="border-top: 1px solid #E9E9E9;">
              <df-oemmenu-label>
                <div >{{lang.general.rating}}</div>
              </df-oemmenu-label>
              <df-oemmenu-warp>
                  <div class="filter-box star-filter-box">
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox "   style=" flex-shrink: 0;" type="radio" name="star_eq" value="0"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.all}}
                    </label>
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox "  style=" flex-shrink: 0;" type="radio" name="star_eq" value="5"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#9733; &#9733;
                    </label>
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox "   style=" flex-shrink: 0;" type="radio" name="star_eq" value="4"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#9733; &#x2606;
                    </label>
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox "   style=" flex-shrink: 0;" type="radio" name="star_eq" value="3"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#x2606; &#x2606;
                    </label>
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox " style=" flex-shrink: 0;" type="radio" name="star_eq" value="2"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#x2606; &#x2606; &#x2606;
                    </label>
                    <label class="filter-box-item checkbox_label mo-checkbox" >  
                      <input class=" mo-checkbox_input order_checkbox "  style=" flex-shrink: 0;" type="radio" name="star_eq" value="1"/>
                      <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#x2606; &#x2606; &#x2606; &#x2606;
                    </label>
                  </div>
              </df-oemmenu-warp>
            </df-oemmenu>

        </div>
        <div class="drawer-footer df-flex df-gap-4" style="padding: 16px 15px;border-top: 1px solid #E9E9E9;">
          {% if section.settings.tag_type != 1 %}
          <div class="drawer-btn secondary_btn df-px-5 filter_clear drawer-close">{{lang.collections.detail.clear_all | default:"Clear all"}}</div>
          {% endif %}
          <div class="drawer-btn main_btn df-flex-1 drawer-close" id="filter_submit">{{lang.cart.list.apply | default:"Apply"}}</div>
        </div>
      </div>
    
    </df-oemdrawer-popup-warp>
  </df-oemdrawer-popup>
</df-oemdrawer>